<template>
	<view class="content">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>


		<view class="scroll-menu">
			<!-- 滑动菜单 -->
			<scroll-view class="scroll-view_H" scroll-x="true" :scroll-into-view="scrollInto"
				scroll-with-animation="true">
				<view class="scroll-view-item_H" v-for="(item,index) in tabList" :key="index" @click="ontabtap(index)"
					:data-current="index" :class="tabIndex==index ? 'scroll-view-item_h_active' : ''"
					:id="'item-' + index">
					{{item}}
				</view>
			</scroll-view>
			<!-- 分割线 -->
			<view class="line-h"></view>
			<!-- 列表 -->
			<scroll-view class="scroll-view" scroll-y="true">
				<view class="post-item" v-for="(post, index) in posts" :key="index">
					<!-- 头像 -->
					<image class="avatar" :src="post.avatar" mode="aspectFill"></image>
					<!-- 内容 -->
					<view class="content">
						<view class="header">
							<text class="name">{{ post.name }}</text>
							<text class="time">{{ post.time }}</text>
						</view>
						<!-- 图片展示 -->
						<view class="image-container">
							<image v-for="(img, imgIndex) in post.images.slice(0, 9)" :key="imgIndex" class="post-image"
								:src="img" mode="aspectFill" :style="{ borderRadius: '10rpx' }"
								@click="previewImage(post.images, imgIndex)"></image>
						</view>
						<!-- 评论折叠 -->
						<view class="comments">
							<view class="comment" v-for="(comment, commentIndex) in post.comments" :key="commentIndex"
								v-show="commentIndex < 3 || post.isExpanded">
								<text class="comment-content">{{ comment }}</text>
							</view>
							<view class="expand-btn" @click="post.isExpanded = !post.isExpanded"
								v-if="post.comments.length > 3">
								{{ post.isExpanded ? "收起" : "展开" }}
							</view>
						</view>
						<!-- 点赞和评论 -->
						<view class="actions">
							<text class="action">👍 {{ post.likes }}</text>
							<text class="action" @click="openComment(post.id)">💬 {{ post.comments.length }}</text>
						</view>
					</view>
				</view>
			</scroll-view>

		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				tabIndex: 0,
				scrollInto: "",
				data: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				],
				tabList: ['开心一刻', '每周精彩', '每月精彩', '每季精彩', '年度时刻'],
				posts: [{
						id: 1,
						avatar: "/static/logo_0.png",
						name: "张三",
						time: "2025-03-07",
						images: [
							"/static/images/picture/01.png",
							"/static/images/picture/02.png",
							"/static/images/picture/03.png",
							"/static/images/picture/04.png",
							"/static/images/picture/05.png",
							"/static/images/picture/01.png",
							"/static/images/picture/01.png",
							"/static/images/picture/01.png",
							"/static/images/picture/01.png"
						],
						comments: [
							"评论1：这是一条很长的评论内容，用于测试折叠功能。",
							"评论2：第二条评论。",
							"评论3：第三条评论。",
							"评论4：第四条评论，用于测试折叠功能。"
						],
						likes: 5,
						isExpanded: false
					},
					{
						id: 2,
						avatar: "/static/logo.png",
						name: "王五",
						time: "2025-03-07",
						images: [
							"/static/images/picture/01.png",

						],
						comments: [
							"评论1：景色真美。",

						],
						likes: 99,
						isExpanded: true
					},
					{
						id: 3,
						avatar: "/static/logo_0.png",
						name: "哈哈",
						time: "2025-03-07",
						images: [
							"/static/images/picture/01.png",
							"/static/images/picture/02.png",
						],
						comments: [
							"评论1：这是一条很长的评论内容，用于测试折叠功能。",
							"评论2：第二条评论。",
							"评论3：第三条评论。",
							"评论4：第四条评论，用于测试折叠功能。"
						],
						likes: 5,
						isExpanded: false
					},
				]
			}
		},
		methods: {
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			ontabtap(index) {
				this.tabIndex = index
				this.scrollInto = 'item-' + index;
				console.log(index)
			},
			likePost(postId) {
				const post = this.posts.find(p => p.id === postId);
				if (post) {
					post.likes += 1;
				}
			},
			commentPost(postId) {
				console.log("评论帖子：", postId);
				// 跳转到评论页面或弹出评论框
			},
			// 图片预览功能
			previewImage(imageList, currentIndex) {
				uni.previewImage({
					current: imageList[currentIndex], // 当前点击的图片
					urls: imageList, // 所有图片的URL数组
					indicator: "number", // 显示图片索引
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success(data) {
							console.log("长按图片操作：", data);
						},
						fail(err) {
							console.log("长按图片操作失败：", err);
						}
					}
				});
			},
			// 打开评论输入框
			openComment(postId) {
				const post = this.posts.find(p => p.id === postId);
				if (!post) return;

				uni.showModal({
					title: "发表评论",
					showCancel: true,
					editable: true,
					placeholderText: "请输入评论内容...",
					success: (res) => {
						if (res.confirm) {
							// 添加评论到对应帖子
							post.comments.push(res.content);
						}
					}
				});
			}

		},
		onLoad: function() {}
	}
</script>

<style>
	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		background-color: #d1d9e5;
		border-radius: 5px;
	}

	.scroll-view-item_h_active {
		color: darkgreen;
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.scroll-view {
		height: 100%;
	}

	.post-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.content {
		flex: 1;
	}

	.header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.post-image {
		width: 33.33%;
		height: 200rpx;
		margin-bottom: 10rpx;
	}

	.comment {
		font-size: 28rpx;
		color: #555;
		margin-bottom: 10rpx;
	}

	.expand-btn {
		color: #007aff;
		font-size: 28rpx;
		text-align: center;
	}

	.actions {
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		color: #555;
	}
</style>